const TodoItem =(props)=>{
    const {
        text,
        id,
        isComplete
    } = props.todos
    const { onToggle,onDelete } = props

    return(
    <div className="todo-item">
        <input type="checkbox" checked={isComplete} onChange={onToggle}/>
        <span className={isComplete?'completed':''}>{text}</span>
        <button onClick={onDelete}>Del</button>
    </div>)
}
export default TodoItem